<template>
  <div class="DataScreening">
    <el-card>
      <div class="searchBox">
        <div class="p">
          <p :class="{ active: index == 1 }" @click="activeStatusA()">今日</p>
          <p :class="{ active: index == 2 }" @click="activeStatusB()">昨日</p>
          <p :class="{ active: index == 3 }" @click="activeStatusC()">总计</p>
        </div>

        <div>
          <el-button class="btn" icon="el-icon-download" @click="exportExcel"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div class="contentBox">
        <el-card class="contentBox_one">
          <p class="p">
            使用数据
            <el-popover placement="right" width="400" trigger="hover">
              <p>安装量:一个设备号只记录一次安装</p>
              <p>启动量:启动APP次数</p>
              <p>注册量:一个用户ID只记录一次注册</p>
              <el-button
                icon="el-icon-warning-outline"
                slot="reference"
                circle
              ></el-button>
            </el-popover>
          </p>
          <div class="contentBox_one_dataList">
            <img src="../../assets/image/xiazia.png" alt="" />
            <div>
              <span>安装量</span>
              <p>{{ installNum }}</p>
            </div>
          </div>
          <div class="contentBox_one_dataList">
            <img src="../../assets/image/qidong.png" alt="" />
            <div>
              <span>启动量</span>
              <p>{{ openAppUserNum }}</p>
            </div>
          </div>
          <div class="contentBox_one_dataList">
            <img src="../../assets/image/zhuce.png" alt="" />
            <div class="contentBox_one_dataList_div">
              <span>注册量</span>
              <p>{{ registerNum }}</p>
            </div>
            <div>
              <p class="img_p">
                <img src="../../assets/image/nan.png" alt="" />{{
                  registerNumMan
                }}
              </p>
              <p class="img_p">
                <img src="../../assets/image/nv.png" alt="" />{{
                  registerNumWoman
                }}
              </p>
            </div>
          </div>
        </el-card>
        <el-card class="contentBox_two">
          <p class="p">
            流水数据
            <el-popover placement="right" width="400" trigger="hover">
              <!-- <p>安装量:一个设备号只记录一次安装</p>
              <p>启动量:启动APP次数</p>
              <p>注册量:一个用户ID只记录一次注册</p> -->
              总金额：统计日内内付费用户充值总额<br />
              充值转换率：实际充值人数/点击充值人数<br />
              ARPU：充值额 /有性别的注册用户<br />
              ARPPU：充值额 / 付费用户<br />
              LTV：新用户产生收益总和 / 获取新用户的数量<br />
              <el-button
                icon="el-icon-warning-outline"
                slot="reference"
                circle
              ></el-button>
            </el-popover>
          </p>
          <div class="contentBox_two_div">
            <div class="contentBox_flowingWater_one">
              <div class="contentBox_flowingWater_one_div">
                <div class="content_item">
                  <span>总金额</span>
                  <p>{{ totalPayMent }}</p>
                </div>
                <div class="content_item">
                  <span>充值转换率</span>
                  <p>{{ rechargeTwoRate }}</p>
                </div>
              </div>
              <div class="contentBox_flowingWater_one_div">
                <div class="content_item">
                  <span>ARPU</span>
                  <p>{{ rechargeARPU }}</p>
                </div>
                <div class="content_item">
                  <span>ARPPU</span>
                  <p>{{ rechargeARPPU }}</p>
                </div>
              </div>
              <div class="contentBox_flowingWater_one_div">
                <div class="content_item">
                  <span>LTV</span>
                  <p>{{ ltv }}</p>
                </div>
              </div>
            </div>
            <div class="contentBox_flowingWater_two">
              <div
                id="myChart"
                :style="{ width: '100%', height: '360px' }"
              ></div>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>

    <el-card>
      <h3>
        在线详情
        <el-popover placement="right" width="400" trigger="hover">
          最高在线人数：某一时刻用户总的唯一登录人数最大值
          <el-button
            icon="el-icon-warning-outline"
            slot="reference"
            style="border: none; font-size: 20px; padding: 0px"
            circle
          ></el-button>
        </el-popover>
      </h3>
      <div class="userStatisticsBox">
        <div class="userStatisticsBox_one">
          <div class="searchBox">
            <div class="p">
              <p :class="{ active: indexA == '' }" @click="activeStatusD()">
                不限
              </p>
              <p :class="{ active: indexA == 1 }" @click="activeStatusE()">
                男
              </p>
              <p :class="{ active: indexA == 2 }" @click="activeStatusF()">
                女
              </p>
            </div>

            <div>
              <el-button
                class="btn"
                icon="el-icon-download"
                @click="exportExcelD"
                >导出Excel</el-button
              >
            </div>
          </div>
          <div class="onlineCard">
            <el-card class="box">
              <h4>当前在线人数</h4>
              <span>{{ onLineDate }}</span>
              <p>{{ onlineNum }}</p>
            </el-card>
            <el-card class="box">
              <h4>今日在线最高人数</h4>
              <span>{{ onLineDate }}</span>
              <p>{{ onlineTodayPeople }}</p>
            </el-card>
            <el-card class="box">
              <h4>今日平均在线时长</h4>
              <span>{{ onLineDate }}</span>
              <p>{{ onlineTodayAverage + "s" }}</p>
            </el-card>
            <el-card class="box">
              <h4>今日在线新用户数</h4>
              <span>{{ onLineDate }}</span>
              <p>{{ onLineNewUsers }}</p>
            </el-card>
          </div>
          <div class="onlineCard">
            <el-card class="boxA">
              <h4>近七日在线人数</h4>
              <span>{{ sevenDate }}</span>
              <p>{{ sevenDaysOnlineTodayPeople }}</p>
            </el-card>
            <el-card class="boxA">
              <h4>近七日最高在线人数</h4>
              <span>{{ sevenDate }}</span>
              <p>{{ sevenDaysOnlinePeople }}</p>
            </el-card>
            <!-- <el-card class="box">
              <h4>近七日平均在线时长</h4>
              <span>{{ sevenDate }}</span>
              <p>{{ sevenDaysOnlineTodayAverage + "s" }}</p>
            </el-card>
            <el-card class="box">
              <h4>近七日在线新用户数</h4>
              <span>{{ sevenDate }}</span>
              <p>{{ sevenNewUsers }}</p>
            </el-card> -->
          </div>
          <div class="onlineCard">
            <el-card class="boxA">
              <h4>近七日平均在线时长</h4>
              <span>{{ sevenDate }}</span>
              <p>{{ sevenDaysOnlineTodayAverage + "s" }}</p>
            </el-card>
            <el-card class="boxA">
              <h4>近七日在线新用户数</h4>
              <span>{{ sevenDate }}</span>
              <p>{{ sevenNewUsers }}</p>
            </el-card>
          </div>
        </div>
        <div class="userStatisticsBox_two">
          <div id="myChartA" :style="{ width: '100%', height: '640px' }"></div>
        </div>
      </div>
    </el-card>

    <el-card>
      <h3>用户画像</h3>
      <div class="userPortraitBox">
        <div class="userPortraitBox_one">
          <div id="myChartB" :style="{ width: '100%', height: '420px' }"></div>
          <div id="myChartC" :style="{ width: '100%', height: '420px' }"></div>
        </div>
        <div class="userPortraitBox_two">
          <div class="searchBox">
            <div class="p">
              <!-- <p :class="{ active: indexB == 1 }" @click="activeStatusG()">
                省
              </p> -->
              <!-- <p :class="{ active: indexB == 2 }" @click="activeStatusH()">
                区域
              </p> -->
              <!-- <p :class="{ active: indexB == 3 }" @click="activeStatusI()">
                市区
              </p> -->
              <el-radio-group
                v-model="indexB"
                size="medium"
                fill="#5470c6"
                @change="list"
              >
                <el-radio-button label="1">省</el-radio-button>
                <el-radio-button label="2">市区</el-radio-button>
              </el-radio-group>
              <span class="sort" @click="sortChange">
                <div :class="{ active1: sort == 1 }">
                  <span class="el-icon-caret-top"></span>
                </div>
                <div :class="{ active1: sort == 2 }" style="margin-top: -10px">
                  <span class="el-icon-caret-bottom"></span>
                </div>
              </span>
            </div>
          </div>
          <!-- 进度条 -->
          <div style="city">
            <div
              v-for="(item, index) in cityList"
              :key="index"
              class="jindutiao"
            >
              <span> {{ item.city }}</span>
              <!-- <span>{{ item.num + "%" }}</span> -->
              <el-progress
                :percentage="item.num"
                :color="customColor"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  chartOnlinedetails,
  chartFlowDate,
  userPortrait,
  chartOnlinedetailsLine,
  areaList,
} from "@/api/DataManagement";

export default {
  data() {
    return {
      customColor: "#409eff",
      cityList: [],
      progressBarArea: [],
      progressBarNum: [],
      totalPayMent: "",
      rechargeTwoRate: "",
      rechargeARPU: "",
      rechargeARPPU: "",
      ltv: "",
      installNum: "", //安装量
      openAppUserNum: "", //启动量
      registerNum: "", //注册量
      registerNumMan: "",
      registerNumWoman: "",
      onLineDate: "", //当前日期
      onlineNum: "",
      onlineTodayPeople: "", //今日在线最高人数
      onlineTodayAverage: "", //今日平均在线时长
      onLineNewUsers: "", //今日在线新用户数
      sevenDaysOnlineTodayPeople: "", //近七日在线人数
      sevenDaysOnlinePeople: "", //近七日最高在线人数
      sevenDaysOnlineTodayAverage: "", //近七日平均在线时长
      sevenNewUsers: "", //近七日在线新用户数
      sevenDate: "", //七日日期

      index: 1,
      indexA: "",
      indexB: 1,
      sort: "1",
    };
  },
  methods: {
    //排序升降
    sortChange() {
      if (this.sort == 1) {
        this.sort = "2";
      } else {
        this.sort = "1";
      }
      this.list();
    },
    chartFlowDate() {
      chartFlowDate({
        rechargeType: 1, //1 ：今日 2:昨日 3：总计
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChart.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            grid: {
              right: "20%",
            },
            legend: {
              data: ["金额", "人数"],
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  alignWithLabel: true,
                },
                data: res.data.date,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "金额",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金额",
                type: "bar",
                data: res.data.money,
              },
              {
                name: "人数",
                type: "bar",
                yAxisIndex: 1,
                data: res.data.Number,
              },
            ],
          });
          this.totalPayMent = res.data.totalPayMent;
          this.rechargeTwoRate = res.data.rechargeTwoRate;
          this.rechargeARPU = res.data.rechargeARPU;
          this.rechargeARPPU = res.data.rechargeARPPU;
          this.ltv = res.data.ltv;
          this.installNum = res.data.installNum;
          this.openAppUserNum = res.data.openAppUserNum;
          this.registerNum = res.data.registerNum;
          this.registerNumMan = res.data.registerNumMan;
          this.registerNumWoman = res.data.registerNumWoman;
        }
      });
    },
    //用户画像
    userPortrait() {
      userPortrait({}).then((res) => {
        if (res.code == 0) {
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 基于准备好的dom，初始化echarts实例
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            color: colors,
            title: {
              text: "性别分布",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "50%",
                data: [
                  { value: res.data.man, name: "男" },
                  { value: res.data.woman, name: "女" },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });

          // 基于准备好的dom，初始化echarts实例
          let myChartC = this.$echarts.init(
            document.getElementById("myChartC")
          );
          // 绘制图表
          myChartC.setOption({
            color: colors,
            title: {
              text: "年龄分布",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.age,
              axisTick: {
                alignWithLabel: true,
              },
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: res.data.num,
                type: "bar",
                // showBackground: true,
                backgroundStyle: {
                  color: "rgba(220, 220, 220, 0.8)",
                },
              },
            ],
          });
        }
      });
    },
    // 进度条
    async list() {
      const res = await areaList({
        type: this.indexB,
        sort: this.sort,
      });
      // console.log(res.data);
      this.progressBarArea = res.data.area;
      this.progressBarNum = res.data.num;
      // let list = [];
      // for (let key in res.data) {
      //   console.log(res.data[key]);
      //   res.data[key].forEach((item) => {
      //     console.log(item);
      //   });
      this.cityList = this.progressBarArea.map((item, i) =>
        // console.log(item)
        ({ city: item, num: this.progressBarNum[i] })
      );

      // console.log(list);

      var colors = ["#5470C6", "#91CC75", "#EE6666"];

      // 基于准备好的dom，初始化echarts实例
      let myChartD = this.$echarts.init(document.getElementById("myChartD"));
      // 绘制图表
      myChartD.setOption({
        color: colors,
        grid: {
          // 直角坐标系内绘图网格
          left: "80", //grid 组件离容器左侧的距离,
          //left的值可以是80这样具体像素值，
          //也可以是'80%'这样相对于容器高度的百分比
          top: "80",
          right: "0",
          bottom: "0",
          containLabel: true, //gid区域是否包含坐标轴的刻度标签。为true的时候，
          // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
          //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
        },
        xAxis: {
          //直角坐标系grid中的x轴,
          //一般情况下单个grid组件最多只能放上下两个x轴,
          //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
          type: "value", //坐标轴类型,分别有：
          //'value'-数值轴；'category'-类目轴;
          //'time'-时间轴;'log'-对数轴
          splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
          axisLabel: { show: false }, //坐标轴刻度标签
          axisTick: { show: false }, //坐标轴刻度
          axisLine: { show: false }, //坐标轴轴线
        },
        yAxis: {
          type: "category",
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: "black",
            fontSize: 16,
          },
          data: res.data.area, //类目数据，在类目轴（type: 'category'）中有效。
          //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
        },
        series: [
          //系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: "%", //系列名称
            type: "bar", //柱状、条形图
            barWidth: 12, //柱条的宽度,默认自适应
            data: res.data.num, //系列中数据内容数组
            label: {
              //图形上的文本标签
              show: true,
              position: "right", //标签的位置
              offset: [0, -20], //标签文字的偏移，此处表示向上偏移40
              formatter: "{c}{a}", //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: "black", //标签字体颜色
              fontSize: 16, //标签字号
            },
            itemStyle: {
              //图形样式
              normal: {
                //normal 图形在默认状态下的样式;
                //emphasis图形在高亮状态下的样式
                barBorderRadius: 10, //柱条圆角半径,单位px.
                //此处统一设置4个角的圆角大小;
                //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#22B6ED", //柱图渐变色起点颜色
                  },
                  {
                    offset: 1,
                    color: "#3FE279", //柱图渐变色终点颜色
                  },
                ]),
              },
            },
            zlevel: 1, //柱状图所有图形的 zlevel 值,
            //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
          },
          {
            name: "进度条背景",
            type: "bar",
            barGap: "-100%", //不同系列的柱间距离，为百分比。
            // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
            // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
            //并且是对此坐标系中所有 'bar' 系列生效。
            barWidth: 12,
            data: [100, 100, 100, 100, 100, 100],
            color: "#151B87", //柱条颜色
            itemStyle: {
              normal: {
                barBorderRadius: 10,
              },
            },
          },
        ],
      });
    },
    //导出第一个
    async exportExcel() {
      const res = await chartFlowDate({
        rechargeType: this.index, //1 ：今日 2:昨日 3：总计
      });
      if (res.code == 0) {
        require.ensure([], () => {
          let tHeader = ["数据总览"];
          let data = [];
          data.push(["使用数据"]);
          data.push(["安装量", res.data.installNum]);
          data.push(["启动量", res.data.openAppUserNum]);
          data.push(["注册量", res.data.registerNum]);
          data.push(["注册男用户", res.data.registerNumMan]);
          data.push(["注册女用户", res.data.registerNumWoman]);
          data.push(["流水数据"]);
          data.push(["总金额", res.data.totalPayMent]);
          data.push(["充值转换率", res.data.rechargeTwoRate]);
          data.push(["ARPU", res.data.rechargeARPU]);
          data.push(["ARPPU", res.data.rechargeARPPU]);
          data.push(["LTV", res.data.ltv]);
          data.push(["充值明细表"]);
          data.push(["项目", "金额", "人数"]);
          res.data.date.forEach((item, index) => {
            data.push([item, res.data.money[index], res.data.Number[index]]);
          });

          const { export_json_to_excel } = require("@/excel/Export2Excel");
          export_json_to_excel(tHeader, data, "数据总览");
        });
      }
    },
    // 导出在线情况
    exportExcelD() {
      chartOnlinedetails({
        sex: "",
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            array.push({
              onLineDate: res.data.onLineDate,
              onlineNum: res.data.onlineNum,
              onlineTodayPeople: res.data.todayNum,
              onlineTodayAverage: res.data.todayOnlineAvg,
              onLineNewUsers: res.data.onLineNewUsers,
              sevenDate: res.data.sevenDate,
              sevenDaysOnlineTodayPeople: res.data.sevenDayNum,
              sevenDaysOnlinePeople: res.data.sevenOnlineNum,
              sevenDaysOnlineTodayAverage: res.data.sevenOnlineAvg,
              sevenNewUsers: res.data.sevenNewUsers,
            });
            console.log(array);
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "今日日期",
              "当前在线人数",
              "今日在线最高人数",
              "今日平均在线时长",
              "今日在线新用户数",
              "七日日期",
              "近七日在线人数",
              "近七日最高在线人数",
              "近七日平均在线时长",
              "近七日在线新用户数",
            ];
            const filterVal = [
              "onLineDate",
              "onlineNum",
              "onlineTodayPeople",
              "onlineTodayAverage",
              "onLineNewUsers",
              "sevenDate",
              "sevenDaysOnlineTodayPeople",
              "sevenDaysOnlinePeople",
              "sevenDaysOnlineTodayAverage",
              "sevenNewUsers",
            ];
            const list = array;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "在线情况"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //在线详情折线图
    chartOnlinedetailsLine() {
      chartOnlinedetailsLine({}).then((res) => {
        if (res.code == 0) {
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 基于准备好的dom，初始化echarts实例
          let myChartA = this.$echarts.init(
            document.getElementById("myChartA")
          );
          // 绘制图表
          myChartA.setOption({
            color: colors,
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["今日在线人数", "在线最高人数"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "今日在线人数",
                type: "line",
                stack: "总量1",
                data: res.data.onlineNum,
              },
              {
                name: "在线最高人数",
                type: "line",
                stack: "总量",
                data: res.data.maxOnlineNum,
              },
            ],
          });
        }
      });
    },
    //在线详情
    chartOnlinedetails() {
      chartOnlinedetails({}).then((res) => {
        if (res.code == 0) {
          this.onLineDate = res.data.onLineDate; //当前日期
          this.onlineNum = res.data.onlineNum; //当前在线人数
          this.onlineTodayPeople = res.data.todayNum; //今日在线最高人数
          this.onlineTodayAverage = res.data.todayOnlineAvg; //今日平均在线时长
          this.onLineNewUsers = res.data.onLineNewUsers; //今日在线新用户数
          this.sevenDaysOnlineTodayPeople = res.data.sevenDayNum; //近七日在线人数
          this.sevenDaysOnlinePeople = res.data.sevenOnlineNum; //近七日最高在线人数
          this.sevenDaysOnlineTodayAverage = res.data.sevenOnlineAvg; //近七日平均在线时长
          this.sevenNewUsers = res.data.sevenNewUsers; //近七日在线新用户数
          this.sevenDate = res.data.sevenDate; //七日日期
        }
      });
    },
    //使用流水数据选项卡
    activeStatusA() {
      this.index = 1;
      chartFlowDate({
        rechargeType: this.index, //1 ：今日 2:昨日 3：总计
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChart.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            grid: {
              right: "20%",
            },
            legend: {
              data: ["金额", "人数"],
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  alignWithLabel: true,
                },
                data: res.data.date,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "金额",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金额",
                type: "bar",
                data: res.data.money,
              },
              {
                name: "人数",
                type: "bar",
                yAxisIndex: 1,
                data: res.data.Number,
              },
            ],
          });
          this.totalPayMent = res.data.totalPayMent;
          this.rechargeTwoRate = res.data.rechargeTwoRate;
          this.rechargeARPU = res.data.rechargeARPU;
          this.rechargeARPPU = res.data.rechargeARPPU;
          this.ltv = res.data.ltv;
          this.installNum = res.data.installNum;
          this.openAppUserNum = res.data.openAppUserNum;
          this.registerNum = res.data.registerNum;
          this.registerNumMan = res.data.registerNumMan;
          this.registerNumWoman = res.data.registerNumWoman;
        }
      });
    },
    activeStatusB() {
      this.index = 2;
      chartFlowDate({
        rechargeType: this.index, //1 ：今日 2:昨日 3：总计
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChart.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            grid: {
              right: "20%",
            },
            legend: {
              data: ["金额", "人数"],
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  alignWithLabel: true,
                },
                data: res.data.date,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "金额",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金额",
                type: "bar",
                data: res.data.money,
              },
              {
                name: "人数",
                type: "bar",
                yAxisIndex: 1,
                data: res.data.Number,
              },
            ],
          });
          this.totalPayMent = res.data.totalPayMent;
          this.rechargeTwoRate = res.data.rechargeTwoRate;
          this.rechargeARPU = res.data.rechargeARPU;
          this.rechargeARPPU = res.data.rechargeARPPU;
          this.ltv = res.data.ltv;
          this.installNum = res.data.installNum;
          this.openAppUserNum = res.data.openAppUserNum;
          this.registerNum = res.data.registerNum;
          this.registerNumMan = res.data.registerNumMan;
          this.registerNumWoman = res.data.registerNumWoman;
        }
      });
    },
    activeStatusC() {
      this.index = 3;
      chartFlowDate({
        rechargeType: this.index, //1 ：今日 2:昨日 3：总计
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChart.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            grid: {
              right: "20%",
            },
            legend: {
              data: ["金额", "人数"],
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  alignWithLabel: true,
                },
                data: res.data.date,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "金额",
                min: 0,
                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "人数",
                min: 0,
                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "金额",
                type: "bar",
                data: res.data.money,
              },
              {
                name: "人数",
                type: "bar",
                yAxisIndex: 1,
                data: res.data.Number,
              },
            ],
          });
          this.totalPayMent = res.data.totalPayMent;
          this.rechargeTwoRate = res.data.rechargeTwoRate;
          this.rechargeARPU = res.data.rechargeARPU;
          this.rechargeARPPU = res.data.rechargeARPPU;
          this.ltv = res.data.ltv;
          this.installNum = res.data.installNum;
          this.openAppUserNum = res.data.openAppUserNum;
          this.registerNum = res.data.registerNum;
          this.registerNumMan = res.data.registerNumMan;
          this.registerNumWoman = res.data.registerNumWoman;
        }
      });
    },
    //在线详情选项卡
    activeStatusD() {
      this.indexA = "";
      chartOnlinedetails({
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.onLineDate = res.data.onLineDate; //当前日期
          this.onlineNum = res.data.onlineNum; //当前在线人数
          this.onlineTodayPeople = res.data.todayNum; //今日在线最高人数
          this.onlineTodayAverage = res.data.todayOnlineAvg; //今日平均在线时长
          this.onLineNewUsers = res.data.onLineNewUsers; //今日在线新用户数
          this.sevenDaysOnlineTodayPeople = res.data.sevenDayNum; //近七日在线人数
          this.sevenDaysOnlinePeople = res.data.sevenOnlineNum; //近七日最高在线人数
          this.sevenDaysOnlineTodayAverage = res.data.sevenOnlineAvg; //近七日平均在线时长
          this.sevenNewUsers = res.data.sevenNewUsers; //近七日在线新用户数
          this.sevenDate = res.data.sevenDate; //七日日期
        }
      });
    },
    activeStatusE() {
      this.indexA = 1;
      chartOnlinedetails({
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.onLineDate = res.data.onLineDate; //当前日期
          this.onlineNum = res.data.onlineNum; //当前在线人数
          this.onlineTodayPeople = res.data.todayNum; //今日在线最高人数
          this.onlineTodayAverage = res.data.todayOnlineAvg; //今日平均在线时长
          this.onLineNewUsers = res.data.onLineNewUsers; //今日在线新用户数
          this.sevenDaysOnlineTodayPeople = res.data.sevenDayNum; //近七日在线人数
          this.sevenDaysOnlinePeople = res.data.sevenOnlineNum; //近七日最高在线人数
          this.sevenDaysOnlineTodayAverage = res.data.sevenOnlineAvg; //近七日平均在线时长
          this.sevenNewUsers = res.data.sevenNewUsers; //近七日在线新用户数
          this.sevenDate = res.data.sevenDate; //七日日期
        }
      });
    },
    activeStatusF() {
      this.indexA = 2;
      chartOnlinedetails({
        sex: this.indexA,
      }).then((res) => {
        if (res.code == 0) {
          this.onLineDate = res.data.onLineDate; //当前日期
          this.onlineNum = res.data.onlineNum; //当前在线人数
          this.onlineTodayPeople = res.data.todayNum; //今日在线最高人数
          this.onlineTodayAverage = res.data.todayOnlineAvg; //今日平均在线时长
          this.onLineNewUsers = res.data.onLineNewUsers; //今日在线新用户数
          this.sevenDaysOnlineTodayPeople = res.data.sevenDayNum; //近七日在线人数
          this.sevenDaysOnlinePeople = res.data.sevenOnlineNum; //近七日最高在线人数
          this.sevenDaysOnlineTodayAverage = res.data.sevenOnlineAvg; //近七日平均在线时长
          this.sevenNewUsers = res.data.sevenNewUsers; //近七日在线新用户数
          this.sevenDate = res.data.sevenDate; //七日日期
        }
      });
    },

    //用户画像选项卡
    activeStatusG() {
      this.indexB = 1;
    },
    activeStatusH() {
      this.indexB = 2;
    },
    activeStatusI() {
      this.indexB = 3;
    },
  },
  mounted() {
    this.list();
  },
  created() {
    this.chartOnlinedetails();
    this.chartFlowDate();
    this.userPortrait(); //用户画像
    this.chartOnlinedetailsLine();
    this.list();
  },
};
</script>

<style lang="less" scoped>
.DataScreening {
  height: 100%;
  margin: 0px 20px 20px 20px;
  padding: 20px;
  .el-card {
    margin-top: 20px;
    .searchBox {
      display: flex;
      justify-content: space-between;
      .p {
        display: flex;
        p {
          width: 100px;
          line-height: 40px;
          text-align: center;
        }
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
    }
    .contentBox {
      display: flex;
      .contentBox_one {
        width: 20%;
        margin-right: 20px;
        .p {
          font-size: 26px;
          font-weight: bold;
          margin-bottom: 90px;
          .el-button {
            border: none;
            font-size: 20px;
            padding: 0px;
          }
        }
        .contentBox_one_dataList {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          img {
            width: 40px;
            height: 40px;
            margin-right: 20px;
          }
          div {
            font-size: 20px;
            p {
              margin: 6px 0px;
              font-weight: bold;
              font-size: 22px;
            }
            .img_p {
              display: flex;
              align-items: center;
              font-weight: 100;
              img {
                width: 20px;
                height: 20px;
                margin: -2px 6px 0px 0px;
              }
            }
          }
          .contentBox_one_dataList_div {
            margin-right: 60px;
          }
        }
      }
      .contentBox_two {
        flex: 1;
        .p {
          font-size: 26px;
          font-weight: bold;
          .el-button {
            border: none;
            font-size: 20px;
            padding: 0px;
          }
        }
        .contentBox_two_div {
          display: flex;
          .contentBox_flowingWater_one {
            width: 30%;
            // margin-right: 20px;
            padding-top: 60px;
            .contentBox_flowingWater_one_div {
              display: flex;
              justify-content: space-between;
              margin-bottom: 28px;
              // div {
              //   margin-right: 100px;
              // }
              .content_item {
                width: 50%;
              }
              p {
                font-size: 24px;
                font-weight: bold;
                margin: 6px 0px;
              }
            }
          }
          .contentBox_flowingWater_two {
            flex: 1;
          }
        }
      }
    }
    .userStatisticsBox {
      display: flex;
      .userStatisticsBox_one {
        width: 54%;
        .onlineCard {
          display: flex;
          justify-content: space-between;
          .box {
            width: 190px;
            height: 140px;
            margin-right: 10px;
          }
          .boxA {
            width: 46%;
          }
        }
      }
      .userStatisticsBox_two {
        flex: 1;
      }
    }
    .city {
      overflow-y: scroll;
    }
    .jindutiao {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 50px;
    }
    .userPortraitBox {
      display: flex;
      .userPortraitBox_one {
        width: 50%;
      }
      .userPortraitBox_two {
        flex: 1;
        .p {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .sort {
            margin-right: 20px;
            div {
              display: block;
              font-size: 20px;
              color: #ccc;
            }
            .active1 {
              color: #409eff;
            }
          }
        }
      }
    }
  }
}
</style>